import React, { useEffect, useCallback, useState } from 'react';
import { getActDeploymentQueryDeployment } from '../../../../Api/setUrl';
import AddDeploymentModule from './components/AddDeploymentModule';
import {getActDeploymentDeleteDeployment} from '../../../../Api/setUrl';
import {
    ProcessDeploymentListAll
} from './style';
import { message, PageHeader, Table, Image, Button, Space, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;

const ProcessDeploymentList = () => {
    const [listData, setListData] = useState([]);
    const [AddDeploymentModuleShow, setAddDeploymentModuleShow] = useState(false); // 部署显示
    const listFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getActDeploymentQueryDeployment();
                if (code === '20000') {
                    setListData(data)
                } else {
                    message.error(msg);
                }
            })()
        },
        [],
    )
    useEffect(() => {
        listFun();
    }, [listFun])
    //部署
    const handleDeployment = () => {
        setAddDeploymentModuleShow(true)
    }
    //删除部署
    const handleDelete = (id, key) => {
        confirm({
            title: '你确定要删除当前部署流程吗?',
            icon: <ExclamationCircleOutlined />,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                ;(async () => {
                    const {code, msg} = await getActDeploymentDeleteDeployment({
                        id,
                        key
                    });
                    if(code === '20000'){
                        message.success('删除成功！');
                        listFun();
                    }else{
                        message.error(msg);
                    }
                })()
            }
          });
    }
    const columns = [
        {
            title: '序号',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '流程部署id',
            dataIndex: 'id',
        },
        {
            title: '流程定义key',
            dataIndex: 'key'
        },
        {
            title: '流程定义名称',
            dataIndex: 'name'
        },
        {
            title: '流程图',
            dataIndex: 'base64Image',
            render: (text) => <Image
                width={200}
                src={"data:image/png;base64," + text}
            />
        },
        {
            title: '操作',
            render: (text,recode) => <Space>
                <Button type = 'primary' danger onClick = {() => handleDelete(recode.id, recode.key)}>删除</Button>
            </Space>
        },
    ];
    return <ProcessDeploymentListAll>
        <PageHeader
            className="site-page-header"
            title="流程部署"
            extra={[
                <Button key="1" type='primary' onClick={() => handleDeployment()}>部署</Button>
            ]}
        />
        <Table dataSource={listData} columns={columns} rowKey='id' />
        <AddDeploymentModule
            AddDeploymentModuleShow={AddDeploymentModuleShow}
            setAddDeploymentModuleShow={setAddDeploymentModuleShow}
            listFun={listFun}
        />

    </ProcessDeploymentListAll>
}

export default ProcessDeploymentList;